<template>
  <div class="result container-fluid">
    <div class="row">
      <div class="title col-xs-12 text-center">
        <span class="title-text">测试结果</span>
      </div>
      <div id="work" class="col-xs-12" style="width: 100%;height:400px;padding-left:40px"></div>
      <div id="trueOneself" class="col-xs-12" style="width: 100%;height:400px;padding-left:40px"></div>
      <div class="col-xs-12 result-text">
        <span style="color:#cc5c5c">注：以下分析根据“工作”折线图的最高点和“本我”折线图的最低点得出</span>
        <hr>
        <span>{{username}}是</span>
        <span style="color:#58a7f8">
          <b>{{classText.class}}</b>
        </span>
        <br>
        <span style="color:#58a7f8">对于{{username}}的描述为：</span>
        <span>{{classText.text}}</span>
        <br>
        <span style="color:#58a7f8">{{username}}的行为倾向：</span>
        <br>
        <span v-html="classText.action"></span>
        <span style="color:#58a7f8">{{username}}喜欢的环境：</span>
        <br>
        <span v-html="classText.environment"></span>
      </div>
    </div>
  </div>
</template>

<script>
// 引入基本模板,按需加载
let echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入柱状图
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "result",
  data() {
    return {
      username: "",
      a: 0, //O(常有)
      b: 0, //@(常有)
      c: 0, //V(常有)
      d: 0, //#(常有)

      aa: 0, //O(不常有)
      bb: 0, //@(不常有)
      cc: 0, //V(不常有)
      dd: 0, //#(不常有)

      classText: {
        class: "", //类型
        text: "", //结果总描述
        action: "", //行为倾向
        environment: "" //环境
      },
      dClass: {
        class: "指挥者（D类型）", //类型
        text:
          "要求成绩表现;反应快，急性，动怒也快，作决定也快;有时间紧迫感;性直，敢于对质，施压;善于领导;敢于冒险。", //结果总描述
        action:
          "1.立刻要结果 &nbsp  2.质问现状<br>3.采取行动   &nbsp  4.使用权威<br>5.接受挑战   &nbsp  6.克服困难<br>7.很快做决定  &nbsp 8.解决问题<br>", //行为倾向
        environment:
          "1.权利与权威   &nbsp    2.直接的回答<br>3.特权与挑战    &nbsp   4.晋升机会<br>5.个人表现的机会  &nbsp 6.不受管理监控<br>7.自由运作的空间 &nbsp  8.创新及多变的活动" //环境
      },
      iClass: {
        class: "推动者（I类型）", //类型
        text:
          "乐观，不甘寂寞；人际向导，喜欢与人沟通；轻易以语言表达自己的意见与思想；容易表露情绪-激动，紧张，兴奋；喜欢活动；容易信任别人；表现得很自信；喜欢新事物，认识新朋友；推动力来自：称赞，认同，认可，焦点；适合的工作环境：可以表现个人才华，有说话及与人沟通的机会；解决问题的方式：以口才，信任，经验，别人的支持。", //结果总描述
        action:
          "1.喜欢接触人 &nbsp  2.散发热忱<br>3.留给人好的印象   &nbsp  4.善于招待人<br>5.口才流利   &nbsp  6.对人对事乐观<br>7.营造激励人的环境  &nbsp 8.喜欢团队活动<br>", //行为倾向
        environment:
          "1.受人欢迎及肯定   &nbsp    2.民主的人际关系<br>3.表扬他的能力     &nbsp   4.不被细节及监控约束<br>5.口头发表的机会与工作  &nbsp 6.引导与协谈<br>7.工作外的团体活动 &nbsp  8.工作条件投其所好" //环境
      },
      sClass: {
        class: "和谐者（S类型）", //类型
        text:
          "擅长按部就班，实行计划；不表露情绪，控制情绪，其实感情是最脆弱的；需要安全感，需要多方保障；好的聆听者，不喜欢与人对质，有时容易接纳别人意见；脚踏实地，受人欢迎；忠诚，保留在主流；让生意延续，不节外生枝；以服务他人为本，先为他人着想。", //结果总描述
        action:
          "1.做事稳定可靠 &nbsp  2.表现忠诚度<br>3.有耐心   &nbsp  4.擅于倾听<br>5.能发展专业技巧   &nbsp  6.安抚情绪激动的人<br>7.愿意帮助别人   &nbsp 8.建立和谐稳定的工作环境<br>", //行为倾向
        environment:
          "1.除非有好的改变理由宁可维持现状   &nbsp    2.受到真挚的赞美<br>3.可预期的例行作业     &nbsp   4.被团体认可<br>5.工作成果得到认同  &nbsp 6.标准化作业流程<br>7.工作不影响家庭生活  &nbsp  8.避免冲突" //环境
      },
      cClass: {
        class: "分析者（C类型）", //类型
        text:
          "尖耳聆听，特别注意细节，非语言的沟通者；从上层的承诺及指标去制定自己的方向；把风险降到最低，把准确度维持到最高；一切以资料为证。", //结果总描述
        action:
          "1.注重关键性的指令及标准 &nbsp  2.表现忠诚度<br>3.有耐心   &nbsp  4.擅于倾听<br>5.能发展专业技巧   &nbsp  6.安抚情绪激动的人<br>7.愿意帮助别人   &nbsp 8.建立和谐稳定的工作环境<br>", //行为倾向
        environment:
          "1.明确界定工作要求   &nbsp    2.明确界定工作要求<br>3.注重品质及精确度      &nbsp   4.能够问“为什么”<br>5.保守及中规中矩的工作环境   &nbsp 6.重视专业表现<br>7.有机会一展专长" //环境
      },
      diClass: {
        class: "说服者（I/D类型）", //类型
        text:
          "善用人脉取得成果；激励人心去达到自己的目标；能独立思考，有强的自觉，应变能力快；积极乐观，能有很好的业绩表现；不喜欢一成不便的定规。", //结果总描述
        action: "暂时还不告诉你<br>", //行为倾向
        environment: "暂时还不告诉你" //环境
      },
      dcClass: {
        class: "实践者（D/C类型）", //类型
        text:
          "思考并实践创意的实践者；目标导向者，精密的擅用资料及资源去完成目标；动作前花多时间作三思，给人优柔寡断感受，一旦决定后就迫不及待去完成它；对人与事要求高，免不了给人压力；适合的工作环境：创意及逻辑思考，研究及解决问题，讲求时间效率。", //结果总描述
        action: "暂时还不告诉你<br>", //行为倾向
        environment: "暂时还不告诉你" //环境
      },
      csClass: {
        class: "协调者（C/S类型）", //类型
        text:
          "实行并改良计划者；有自律，很清楚工作的程序；不急，不喜欢变化；小心，所以三思而后行才有反应；喜欢逻辑；内向，敏感；分散冒险；不喜欢工作被卡着；适合的工作环境：以目标为主，有指导方针，分析资料，讲求合作。", //结果总描述
        action: "暂时还不告诉你<br>", //行为倾向
        environment: "暂时还不告诉你" //环境
      },
      siClass: {
        class: "亲善者（S/I类型）", //类型
        text:
          "亲善的在人群中鼓动；能言善道，不冒犯人；善解人意，热情，平易近人；容易合群，注重人际关系。", //结果总描述
        action: "暂时还不告诉你<br>", //行为倾向
        environment: "暂时还不告诉你" //环境
      },
      eClass: {
        class: "未知类型）", //类型
        text: "你太难懂了，结合上两张图自行分析吧", //结果总描述
        action: "未知<br>", //行为倾向
        environment: "未知" //环境
      }
    };
  },
  created() {
    this.config();
  },
  mounted() {},
  methods: {
    config() {
      let userUUID = JSON.parse(sessionStorage.getItem("userInfo")).userUUID;
      this.username = JSON.parse(sessionStorage.getItem("userInfo")).username;
      let params = new URLSearchParams();
      params.append("userUUID", userUUID);
      this.$axios
        .post("/results/get/by/userUUID.wy", params)
        .then(res => {
          console.log(res.data);
          this.a = res.data.a;
          this.b = res.data.b;
          this.c = res.data.c;
          this.d = res.data.d;
          this.aa = res.data.aa;
          this.bb = res.data.bb;
          this.cc = res.data.cc;
          this.dd = res.data.dd;
          this.work();
          this.trueOneself();
          this.textResult();
        })
        .catch(err => {
          Message.error("未知错误");
        });
    },
    work() {
      let option = {
        title: {
          text: "工作"
        },
        tooltip: {},
        legend: {
          data: ["测试结果"]
        },
        xAxis: {
          data: ["D", "I", "S", "C"]
        },
        yAxis: {
          data: [
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13,
            14,
            15,
            16,
            17,
            18,
            19,
            20,
            21,
            22,
            23,
            24,
            25,
            26,
            27,
            28
          ]
        },
        series: [
          {
            name: "类型倾向指数",
            type: "line",
            data: [
              { name: "D", value: this.a },
              { name: "I", value: this.b },
              { name: "S", value: this.c },
              { name: "C", value: this.d }
            ]
          }
        ]
      };
      //初始化echarts实例
      let myChart = echarts.init(document.getElementById("work"));
      window.onresize = myChart.resize;
      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
    },
    trueOneself() {
      let option = {
        title: {
          text: "本我"
        },
        tooltip: {},
        legend: {
          data: ["测试结果"]
        },
        xAxis: {
          data: ["D", "I", "S", "C"]
        },
        yAxis: {
          data: [
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13,
            14,
            15,
            16,
            17,
            18,
            19,
            20,
            21,
            22,
            23,
            24,
            25,
            26,
            27,
            28
          ]
        },
        series: [
          {
            name: "类型倾向指数",
            type: "line",
            data: [
              { name: "D", value: this.aa },
              { name: "I", value: this.bb },
              { name: "S", value: this.cc },
              { name: "C", value: this.dd }
            ]
          }
        ]
      };
      //初始化echarts实例
      let myChart = echarts.init(document.getElementById("trueOneself"));
      window.onresize = myChart.resize;
      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
    },
    textResult() {
      if (this.a > this.b && this.a > this.c && this.a > this.d) {
        this.classText = this.dClass;
      } else if (this.b > this.a && this.b > this.c && this.b > this.d) {
        this.classText = this.iClass;
      } else if (this.c > this.a && this.c > this.b && this.c > this.d) {
        this.classText = this.sClass;
      } else if (this.d > this.a && this.d > this.b && this.d > this.c) {
        this.classText = this.cClass;
      } else if (this.a == this.b && this.a > this.c && this.a > this.d) {
        this.classText = this.diClass;
      } else if (this.a == this.d && this.a > this.c && this.a > this.d) {
        this.classText = this.dcClass;
      } else if (this.c == this.d && this.c > this.a && this.c > this.d) {
        this.classText = this.csClass;
      } else if (this.b == this.c && this.c > this.a && this.c > this.d) {
        this.classText = this.siClass;
      } else {
        this.classText = this.eClass;
      }
    }
  }
};
</script>

<style scope>
.title {
  padding-top: 35%;
}
.title-text {
  font-size: 28px;
  color: #23b7b7;
  font-weight: 600;
}
.result-text {
  font-size: 16px;
}
</style>
